<!DOCTYPE html>
<html lang="zh-CN" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>9.扩展-解析左侧菜单原理 | 优医问诊H5</title>
    <meta name="description" content="最新Vue3技术栈,Vue3,TS,Pinia,Vant,在线问诊项目,H5">
    <link rel="preload stylesheet" href="/hm-docs/assets/style.f60a3f91.css" as="style">
    <script type="module" src="/hm-docs/assets/app.5c44d29a.js"></script>
    <link rel="preload" href="/hm-docs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
  <link rel="modulepreload" href="/hm-docs/assets/chunks/framework.956eca13.js">
  <link rel="modulepreload" href="/hm-docs/assets/chunks/theme.bb7bd755.js">
  <link rel="modulepreload" href="/hm-docs/assets/hr_Day03-主页模块-修改密码.md.bc380dd0.lean.js">
  <link rel="icon" type="image/svg+xml" href="./logo2.png">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css">
  <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script>
  <script id="check-dark-light">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-99cf8a88><!--[--><!--]--><!--[--><span tabindex="-1" data-v-ae3e3f51></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-ae3e3f51> Skip to content </a><!--]--><!----><header class="VPNav" data-v-99cf8a88 data-v-7e5bc4a5><div class="VPNavBar has-sidebar" data-v-7e5bc4a5 data-v-381568bf><div class="container" data-v-381568bf><div class="title" data-v-381568bf><div class="VPNavBarTitle has-sidebar" data-v-381568bf data-v-305adf00><a class="title" href="/hm-docs/" data-v-305adf00><!--[--><!--]--><!--[--><img class="VPImage logo" src="/hm-docs/logo2.png" alt data-v-6db2186b><!--]--><!--[-->优医问诊H5<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-381568bf><div class="curtain" data-v-381568bf></div><div class="content-body" data-v-381568bf><!--[--><!--]--><div class="VPNavBarSearch search" style="--vp-meta-key:&#39;Meta&#39;;" data-v-381568bf><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-381568bf data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/hm-docs/vue2/base.html" tabindex="0" data-v-7f418b0f data-v-5e623618><!--[-->vue2<!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/hm-docs/vue2/vuex.html" tabindex="0" data-v-7f418b0f data-v-5e623618><!--[-->vuex<!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/hm-docs/interview/%E9%9D%A2%E7%BB%8FH5%E7%AB%AF01.html" tabindex="0" data-v-7f418b0f data-v-5e623618><!--[-->面经<!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/hm-docs/hr/Day01-%E9%A1%B9%E7%9B%AE%E4%BB%8B%E7%BB%8D%E5%8F%8A%E5%88%9D%E5%A7%8B%E5%8C%96-%E7%99%BB%E5%BD%95%E9%A1%B5%E9%9D%A2.html" tabindex="0" data-v-7f418b0f data-v-5e623618><!--[-->人资<!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/hm-docs/hmzs/%E5%89%8D%E5%8F%B0%E5%8F%AF%E8%A7%86%E5%8C%96/01-%E9%A1%B9%E7%9B%AE%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA.html" tabindex="0" data-v-7f418b0f data-v-5e623618><!--[-->黑马智数<!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/hm-docs/mini-rabbit/" tabindex="0" data-v-7f418b0f data-v-5e623618><!--[-->小兔鲜儿<!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/hm-docs/ts/" tabindex="0" data-v-7f418b0f data-v-5e623618><!--[-->TypeScript<!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/hm-docs/vue3/" tabindex="0" data-v-7f418b0f data-v-5e623618><!--[-->Vue3<!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/hm-docs/pinia/" tabindex="0" data-v-7f418b0f data-v-5e623618><!--[-->Pinia<!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/hm-docs/project/" tabindex="0" data-v-7f418b0f data-v-5e623618><!--[-->优医问诊<!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/hm-docs/other-resource/" tabindex="0" data-v-7f418b0f data-v-5e623618><!--[-->其它<!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-381568bf data-v-f6a63727><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-f6a63727 data-v-82b282f1 data-v-f3c41672><span class="check" data-v-f3c41672><span class="icon" data-v-f3c41672><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-82b282f1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-82b282f1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-381568bf data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink" href="https://gitee.com/luckybo0027" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-36371990><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-381568bf data-v-40855f84 data-v-764effdf><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-764effdf><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-764effdf><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-764effdf><div class="VPMenu" data-v-764effdf data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>Appearance</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-82b282f1 data-v-f3c41672><span class="check" data-v-f3c41672><span class="icon" data-v-f3c41672><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-82b282f1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-82b282f1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink" href="https://gitee.com/luckybo0027" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-36371990><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-381568bf data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav" data-v-99cf8a88 data-v-a97031cc><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a97031cc><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-a97031cc><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-a97031cc>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a97031cc data-v-687955bc><button data-v-687955bc>Return to top</button><!----></div></div><aside class="VPSidebar" data-v-99cf8a88 data-v-54885d6c><div class="curtain" data-v-54885d6c></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-54885d6c><span class="visually-hidden" id="sidebar-aria-label" data-v-54885d6c> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-54885d6c><section class="VPSidebarItem level-0 has-active" data-v-54885d6c data-v-c4656e6d><div class="item" role="button" tabindex="0" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><h2 class="text" data-v-c4656e6d>面经H5</h2><!----></div><div class="items" data-v-c4656e6d><!--[--><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/hm-docs/hr/Day01-%E9%A1%B9%E7%9B%AE%E4%BB%8B%E7%BB%8D%E5%8F%8A%E5%88%9D%E5%A7%8B%E5%8C%96-%E7%99%BB%E5%BD%95%E9%A1%B5%E9%9D%A2.html" data-v-c4656e6d><!--[--><p class="text" data-v-c4656e6d>Day01</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/hm-docs/hr/Day02-%E7%99%BB%E5%BD%95%E6%A8%A1%E5%9D%97-%E4%B8%BB%E9%A1%B5%E9%89%B4%E6%9D%83.html" data-v-c4656e6d><!--[--><p class="text" data-v-c4656e6d>Day02</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link is-active has-active" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/hm-docs/hr/Day03-%E4%B8%BB%E9%A1%B5%E6%A8%A1%E5%9D%97-%E4%BF%AE%E6%94%B9%E5%AF%86%E7%A0%81.html" data-v-c4656e6d><!--[--><p class="text" data-v-c4656e6d>Day03</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/hm-docs/hr/Day04-%E7%BB%84%E7%BB%87%E6%9E%B6%E6%9E%84.html" data-v-c4656e6d><!--[--><p class="text" data-v-c4656e6d>Day04</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/hm-docs/hr/Day05-%E7%BB%84%E7%BB%87%E6%9E%B6%E6%9E%84-%E8%A7%92%E8%89%B2%E7%AE%A1%E7%90%86.html" data-v-c4656e6d><!--[--><p class="text" data-v-c4656e6d>Day05</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/hm-docs/hr/Day06-%E8%A7%92%E8%89%B2%E7%AE%A1%E7%90%86-%E5%91%98%E5%B7%A5%E7%AE%A1%E7%90%86.html" data-v-c4656e6d><!--[--><p class="text" data-v-c4656e6d>Day06</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/hm-docs/hr/Day07-%E5%91%98%E5%B7%A5%E7%AE%A1%E7%90%86-%E4%B8%8A%E4%BC%A0%E4%B8%8B%E8%BD%BD.html" data-v-c4656e6d><!--[--><p class="text" data-v-c4656e6d>Day07</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/hm-docs/hr/Day08-Cos%E4%B8%8A%E4%BC%A0%E5%92%8C%E6%9D%83%E9%99%90%E6%95%B0%E6%8D%AE.html" data-v-c4656e6d><!--[--><p class="text" data-v-c4656e6d>Day08</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/hm-docs/hr/Day09-%E6%9D%83%E9%99%90%E5%BA%94%E7%94%A8-%E9%A6%96%E9%A1%B5.html" data-v-c4656e6d><!--[--><p class="text" data-v-c4656e6d>Day09</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/hm-docs/hr/Day10-%E9%A6%96%E9%A1%B5%E5%9B%BE%E8%A1%A8-Nginx%E4%B8%8A%E7%BA%BF.html" data-v-c4656e6d><!--[--><p class="text" data-v-c4656e6d>Day10</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-99cf8a88 data-v-97b5189c><div class="VPDoc has-sidebar has-aside" data-v-97b5189c data-v-e9631fd0><!--[--><!--]--><div class="container" data-v-e9631fd0><div class="aside" data-v-e9631fd0><div class="aside-curtain" data-v-e9631fd0></div><div class="aside-container" data-v-e9631fd0><div class="aside-content" data-v-e9631fd0><div class="VPDocAside" data-v-e9631fd0 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" data-v-3f215769 data-v-ff0f39c8><div class="content" data-v-ff0f39c8><div class="outline-marker" data-v-ff0f39c8></div><div class="outline-title" data-v-ff0f39c8>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-ff0f39c8><span class="visually-hidden" id="doc-outline-aria-label" data-v-ff0f39c8> Table of Contents for current page </span><ul class="root" data-v-ff0f39c8 data-v-b0ff2abe><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-e9631fd0><div class="content-container" data-v-e9631fd0><!--[--><!--]--><!----><main class="main" data-v-e9631fd0><div style="position:relative;" class="vp-doc _hm-docs_hr_Day03-%E4%B8%BB%E9%A1%B5%E6%A8%A1%E5%9D%97-%E4%BF%AE%E6%94%B9%E5%AF%86%E7%A0%81" data-v-e9631fd0><div><h2 id="_1-获取用户资料在vuex中共享" tabindex="-1">1.获取用户资料在Vuex中共享 <a class="header-anchor" href="#_1-获取用户资料在vuex中共享" aria-label="Permalink to &quot;1.获取用户资料在Vuex中共享&quot;">​</a></h2><blockquote><p>登录成功跳转到主页之后，可以获取用户资料，获取的资料在Vuex中共享，这样用户就可以很方便的获取该信息</p></blockquote><ul><li>获取流程</li></ul><p><img src="/hm-docs/assets/1677725540275-c70c9e46-288c-4179-89f5-5e2a953e5d0d.a45949b2.png#averageHue=#fdfdfd&amp;clientId=udd47902c-ce16-4&amp;from=paste&amp;height=402&amp;id=uf4e4f455&amp;name=image.png&amp;originHeight=804&amp;originWidth=2362&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=104056&amp;status=done&amp;style=none&amp;taskId=u4ea30cb3-aba6-4f49-bf03-1d8bf2850c5&amp;title=&amp;width=1181" alt="image.png" data-fancybox="gallery"></p><ul><li>在什么位置获取？</li></ul><p><img src="/hm-docs/assets/1677725622279-8e4d537d-81f3-41a9-9ae4-c9f779d5eea5.cf2aa9a7.png#averageHue=#fdf7f2&amp;clientId=udd47902c-ce16-4&amp;from=paste&amp;height=519&amp;id=ud26b11c7&amp;name=image.png&amp;originHeight=1038&amp;originWidth=2604&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=139647&amp;status=done&amp;style=none&amp;taskId=u041dfff2-10b4-4a0b-9d3b-49704dfa34e&amp;title=&amp;width=1302" alt="image.png" data-fancybox="gallery"></p><blockquote><p>之前在导航守卫的位置，可以确定已经有了token，这个位置获取资料更佳，因为导航守卫在页面发生跳转时出发，这时不论你从何时何地进来，如果发现你没获取资料，都可以非常清楚直观的获取资料。判断条件也使得不会发生重复的加载。</p></blockquote><ul><li>封装获取用户资料的API-代码位置(<strong>src/api/user.js</strong>)</li></ul><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">getUserInfo</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">request</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">    url</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/sys/profile</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ul><li>Vuex中声明用户信息状态，修改用户信息的mutations， 和获取用户信息的action-代码位置(<strong>src/store/modules/user.js</strong>)</li></ul><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> state </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">token</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">getToken</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">userInfo</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{}</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// 这里有一个空对象，为了放置后面取数据报错</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> mutations </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">setUserInfo</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">state</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">userInfo</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">state</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">userInfo</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">userInfo</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> actions </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#C792EA;">async</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">getUserInfo</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">context</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">result</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">await</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">getUserInfo</span><span style="color:#F07178;">()</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">context</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">commit</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">setUserInfo</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">result</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><ul><li>通过getters声明userId(快捷访问)-代码位置(<strong>src/store/getters.js</strong>)</li></ul><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> getters </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#82AAFF;">userId</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">state</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> state</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">user</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">userInfo</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">userId</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> getters</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><ul><li>在权限拦截处调用action-代码位置(<strong>src/pemission.js</strong>)</li></ul><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> router </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">@/router</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> nprogress </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">nprogress</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">nprogress/nprogress.css</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> store </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">@/store</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;"> *前置守卫</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;"> *</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">*/</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> whiteList </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/login</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/404</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">]</span></span>
<span class="line"><span style="color:#A6ACCD;">router</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">beforeEach</span><span style="color:#A6ACCD;">(</span><span style="color:#C792EA;">async</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">to</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">from</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">next</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#A6ACCD;">nprogress</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">start</span><span style="color:#F07178;">()</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">store</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">getters</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">token</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#676E95;font-style:italic;">// 存在token</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">to</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">path</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">===</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/login</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;">      </span><span style="color:#676E95;font-style:italic;">// 跳转到主页</span></span>
<span class="line"><span style="color:#F07178;">      </span><span style="color:#82AAFF;">next</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">) </span><span style="color:#676E95;font-style:italic;">// 中转到主页</span></span>
<span class="line"><span style="color:#89DDFF;">      </span><span style="color:#676E95;font-style:italic;">// next（地址）并没有执行后置守卫</span></span>
<span class="line"><span style="color:#F07178;">      </span><span style="color:#A6ACCD;">nprogress</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">done</span><span style="color:#F07178;">()</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">else</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">       </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">!</span><span style="color:#A6ACCD;">store</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">getters</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">userId</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">         </span><span style="color:#89DDFF;font-style:italic;">await</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">store</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">diapatch</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">user/getUserInfo</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#F07178;">       </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#F07178;">       </span><span style="color:#82AAFF;">next</span><span style="color:#F07178;">() </span><span style="color:#676E95;font-style:italic;">// 放行</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">else</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#676E95;font-style:italic;">// 没有token</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">whiteList</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">includes</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">to</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">path</span><span style="color:#F07178;">)) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">      </span><span style="color:#82AAFF;">next</span><span style="color:#F07178;">()</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">else</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">      </span><span style="color:#82AAFF;">next</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/login</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">) </span><span style="color:#676E95;font-style:italic;">// 中转到登录页</span></span>
<span class="line"><span style="color:#F07178;">      </span><span style="color:#A6ACCD;">nprogress</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">done</span><span style="color:#F07178;">()</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br></div></div><blockquote><p>有同学会问，为什么用户信息不做持久化管理呢？ 不需要缓存吗？ 用户信息不同于token，token是当前用户的唯一标识，在几个小时内都是有效的，但是用户信息可能会进行修改或者发生变化，所以用户信息在一般的项目或者业务中不进行缓存。</p></blockquote><h2 id="_2-显示用户头像和用户名" tabindex="-1">2.显示用户头像和用户名 <a class="header-anchor" href="#_2-显示用户头像和用户名" aria-label="Permalink to &quot;2.显示用户头像和用户名&quot;">​</a></h2><p><img src="/hm-docs/assets/1677726529765-2fa2f60e-f387-4ec7-9e20-659cc85d91ef.54cd9565.png#averageHue=#fefefe&amp;clientId=udd47902c-ce16-4&amp;from=paste&amp;height=55&amp;id=u7f3a5595&amp;name=image.png&amp;originHeight=110&amp;originWidth=318&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=8190&amp;status=done&amp;style=none&amp;taskId=u24fa1de3-3364-4f66-9b6a-afa03f03534&amp;title=&amp;width=159" alt="image.png" data-fancybox="gallery"></p><blockquote><p>首先解析一下顶部组件的内部位置</p></blockquote><p><img src="/hm-docs/assets/1677726559032-2e1f090a-117d-41bc-b58f-40f778a8eefe.522445dc.png#averageHue=#99b94e&amp;clientId=udd47902c-ce16-4&amp;from=paste&amp;height=393&amp;id=u50aa26e7&amp;name=image.png&amp;originHeight=786&amp;originWidth=2474&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=52579&amp;status=done&amp;style=none&amp;taskId=ude633309-843f-416e-a748-8c63bc5be5a&amp;title=&amp;width=1237" alt="image.png" data-fancybox="gallery"></p><blockquote><p>因为上个小节，将资料已经放到了Vuex中，可以通过getters开放属性，直接在组件中引用即可</p></blockquote><ul><li>Vuex中使用getters暴露属性-代码位置(<strong>src/store/getters.js</strong>)</li></ul><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> getters </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#82AAFF;">token</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">state</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> state</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">user</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">token</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#82AAFF;">userId</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">state</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> state</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">user</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">userInfo</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">userId</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#82AAFF;">avatar</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">state</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> state</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">user</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">userInfo</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">staffPhoto</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// 头像</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#82AAFF;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">state</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> state</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">user</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">userInfo</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">username</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// 用户名称</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> getters</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><ul><li>在Navbar组件引入getters-代码位置(<strong>src/layout/components/NavBar.vue</strong>)</li></ul><div class="language-vue line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">export default {</span></span>
<span class="line"><span style="color:#A6ACCD;">  computed: {</span></span>
<span class="line"><span style="color:#A6ACCD;">    // 引入头像和用户名称</span></span>
<span class="line"><span style="color:#A6ACCD;">    ...mapGetters([</span></span>
<span class="line"><span style="color:#A6ACCD;">      &#39;sidebar&#39;,</span></span>
<span class="line"><span style="color:#A6ACCD;">      &#39;avatar&#39;,</span></span>
<span class="line"><span style="color:#A6ACCD;">      &#39;name&#39;</span></span>
<span class="line"><span style="color:#A6ACCD;">    ])</span></span>
<span class="line"><span style="color:#A6ACCD;">  },</span></span>
<span class="line"><span style="color:#A6ACCD;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><ul><li>NavBar组件显示用户名和头像-代码位置(<strong>src/layout/components/NavBar.vue</strong>)</li></ul><div class="language-vue line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">avatar-wrapper</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">          &lt;!-- 头像 --&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">          &lt;img :src=&quot;avatar&quot; class=&quot;user-avatar&quot;&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">          &lt;!-- 用户名称 --&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">          &lt;span class=&quot;name&quot;&gt;{{ name }}&lt;/span&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">          &lt;!-- 图标 --&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">          &lt;i class=&quot;el-icon-setting&quot; /&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><ul><li>设置头像和用户名的样式-代码位置(<strong>src/layout/components/NavBar.vue</strong>)</li></ul><div class="language-css line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">avatar-wrapper</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#B2CCD6;">margin-top</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">5px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#B2CCD6;">position</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> relative</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#B2CCD6;">display</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> flex</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#B2CCD6;">align-items</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> center</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">        .</span><span style="color:#B2CCD6;">name</span><span style="color:#A6ACCD;"> {</span></span>
<span class="line"><span style="color:#A6ACCD;">          //  用户名称距离右侧距离</span></span>
<span class="line"><span style="color:#A6ACCD;">          </span><span style="color:#B2CCD6;">margin-right</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">10px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">          </span><span style="color:#B2CCD6;">font-size</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">16px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">el-icon-setting</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">          </span><span style="color:#B2CCD6;">font-size</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">20px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">user-avatar</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">          </span><span style="color:#B2CCD6;">cursor</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> pointer</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">          </span><span style="color:#B2CCD6;">width</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">30px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">          </span><span style="color:#B2CCD6;">height</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">30px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">          </span><span style="color:#B2CCD6;">border-radius</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">50%</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">      }</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br></div></div><h2 id="_3-处理头像为空的场景" tabindex="-1">3.处理头像为空的场景 <a class="header-anchor" href="#_3-处理头像为空的场景" aria-label="Permalink to &quot;3.处理头像为空的场景&quot;">​</a></h2><blockquote><p>不是所有用户都有头像的，当用户没有头像时要显示对应的内容</p></blockquote><p><img src="/hm-docs/assets/1677727368214-b95869c4-4a36-4d4b-b863-cf517193964b.102b22a4.png#averageHue=#fbfbfb&amp;clientId=udd47902c-ce16-4&amp;from=paste&amp;height=130&amp;id=u33bf8518&amp;name=image.png&amp;originHeight=260&amp;originWidth=2208&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=45901&amp;status=done&amp;style=none&amp;taskId=u02fcc5e0-89c4-446a-b146-09cfd69448e&amp;title=&amp;width=1104" alt="image.png" data-fancybox="gallery"></p><ul><li>条件判断-代码位置(<strong>src/layout/components/NavBar.vue</strong>)</li></ul><div class="language-vue line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">avatar-wrapper</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">          &lt;!-- 头像 --&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">          &lt;img v-if=&quot;avatar&quot; :src=&quot;avatar&quot; class=&quot;user-avatar&quot;&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">          &lt;span v-else class=&quot;username&quot;&gt;{{ name?.charAt(0) }}&lt;/span&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">          &lt;!-- 用户名称 --&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">          &lt;span class=&quot;name&quot;&gt;{{ name }}&lt;/span&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">          &lt;!-- 图标 --&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">          &lt;i class=&quot;el-icon-setting&quot; /&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><ul><li>样式</li></ul><div class="language-css line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">username</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">          </span><span style="color:#B2CCD6;">width</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">30px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">          </span><span style="color:#B2CCD6;">height</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">30px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">          </span><span style="color:#B2CCD6;">text-align</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> center</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">          </span><span style="color:#B2CCD6;">line-height</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">30px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">          </span><span style="color:#B2CCD6;">border-radius</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">50%</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">          </span><span style="color:#B2CCD6;">background</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">#</span><span style="color:#A6ACCD;">04c9be</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">          </span><span style="color:#B2CCD6;">color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">#</span><span style="color:#A6ACCD;">fff</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">          </span><span style="color:#B2CCD6;">margin-right</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">4px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><blockquote><p>这里我们使用了可选链操作符 ？， 它的意思是当？前面的变量为空时，它不会继续往下执行，防止报错，如 null?.name，但是我们当前的版本不支持？的编译，所以需要升级一下对应的版本</p></blockquote><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">$</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">i</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">vue@2.7.0</span><span style="color:#A6ACCD;">  </span><span style="color:#C3E88D;">vue-template-compiler@2.7.0</span><span style="color:#A6ACCD;">   </span><span style="color:#676E95;font-style:italic;">## 升级vue版本️</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><blockquote><p>升级完成后，重启服务就可以了。</p></blockquote><h2 id="_4-处理token失效的问题" tabindex="-1">4.处理token失效的问题 <a class="header-anchor" href="#_4-处理token失效的问题" aria-label="Permalink to &quot;4.处理token失效的问题&quot;">​</a></h2><blockquote><p>token是有时效性的，当token超时，我们需要做一下处理</p></blockquote><p><img src="/hm-docs/assets/1677727686990-34c65c07-f755-4553-92d8-7d2bf4c44bd2.3b46d495.png#averageHue=#fcfcfc&amp;clientId=udd47902c-ce16-4&amp;from=paste&amp;height=167&amp;id=ub8c1ca74&amp;name=image.png&amp;originHeight=334&amp;originWidth=2666&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=61012&amp;status=done&amp;style=none&amp;taskId=u0ee16810-fe28-4268-a33c-c3a473a3db5&amp;title=&amp;width=1333" alt="image.png" data-fancybox="gallery"></p><ul><li>请求拦截器处理-代码位置(<strong>src/utils/request.js</strong>)</li></ul><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 响应拦截器</span></span>
<span class="line"><span style="color:#A6ACCD;">service</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">interceptors</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">response</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">use</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">...,</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">async</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">error</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">error</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">response</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">status</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">===</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">401</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#82AAFF;">Message</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> type</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">warning</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> message</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">token超时了</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#676E95;font-style:italic;">// 说明token超时了</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">await</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">store</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">dispatch</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">user/logout</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">) </span><span style="color:#676E95;font-style:italic;">// 调用action 退出登录</span></span>
<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#676E95;font-style:italic;">//  主动跳到登录页</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">router</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">push</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/login</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">) </span><span style="color:#676E95;font-style:italic;">// 跳转到登录页</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">Promise</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">reject</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">error</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">  </span><span style="color:#676E95;font-style:italic;">// error.message</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#A6ACCD;">Message</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">error</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">error</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">message</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">Promise</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">reject</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">error</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><ul><li>实现Vuex的登出action-代码位置(<strong>src/store/modules/user.js</strong>)</li></ul><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> actions </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;">  </span><span style="color:#676E95;font-style:italic;">// 退出登录的action</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">logout</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">context</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">context</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">commit</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">removeToken</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">) </span><span style="color:#676E95;font-style:italic;">// 删除token</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">context</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">commit</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">setUserInfo</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{}</span><span style="color:#F07178;">) </span><span style="color:#676E95;font-style:italic;">// 设置用户信息为空对象</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h2 id="_5-调整下拉菜单-实现退出登录" tabindex="-1">5.调整下拉菜单，实现退出登录 <a class="header-anchor" href="#_5-调整下拉菜单-实现退出登录" aria-label="Permalink to &quot;5.调整下拉菜单，实现退出登录&quot;">​</a></h2><p><img src="/hm-docs/assets/1677727910140-06fc9d78-ef39-4599-b16a-8b7ee22887c8.7165ae09.png#averageHue=#fefefe&amp;clientId=udd47902c-ce16-4&amp;from=paste&amp;height=260&amp;id=u2cd95410&amp;name=image.png&amp;originHeight=520&amp;originWidth=968&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=45577&amp;status=done&amp;style=none&amp;taskId=u2f67ad91-cc06-4c74-a7a5-793f2d5146d&amp;title=&amp;width=484" alt="image.png" data-fancybox="gallery"></p><blockquote><p>退出登录流程</p></blockquote><p><img src="/hm-docs/assets/1677727932215-56f330fe-744a-445e-bae3-c93135ce5a36.fea651a6.png#averageHue=#c9dced&amp;clientId=udd47902c-ce16-4&amp;from=paste&amp;height=108&amp;id=ub1258d84&amp;name=image.png&amp;originHeight=216&amp;originWidth=1756&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=20632&amp;status=done&amp;style=none&amp;taskId=u12da800c-2010-4565-b870-5527e7e7402&amp;title=&amp;width=878" alt="image.png" data-fancybox="gallery"></p><ul><li>Navbar中点击退出登录-代码位置(<strong>src/layout/components/NavBar.vue</strong>)</li></ul><div class="language-vue line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">el-dropdown-item</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">@</span><span style="color:#C792EA;">click</span><span style="color:#A6ACCD;">.</span><span style="color:#C792EA;">native</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">logout</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">          &lt;span style=&quot;display:block;&quot;&gt;登出&lt;/span&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">el-dropdown-item</span><span style="color:#89DDFF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ul><li>退出方法-代码位置(<strong>src/layout/components/NavBar.vue</strong>)</li></ul><div class="language-vue line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">export default  {</span></span>
<span class="line"><span style="color:#A6ACCD;">  methods: {</span></span>
<span class="line"><span style="color:#A6ACCD;">     async logout() {</span></span>
<span class="line"><span style="color:#A6ACCD;">      // 调用退出登录的action</span></span>
<span class="line"><span style="color:#A6ACCD;">      await this.$store.dispatch(&#39;user/logout&#39;)</span></span>
<span class="line"><span style="color:#A6ACCD;">      this.$router.push(&#39;/login&#39;)</span></span>
<span class="line"><span style="color:#A6ACCD;">    },</span></span>
<span class="line"><span style="color:#A6ACCD;">  }</span></span>
<span class="line"><span style="color:#A6ACCD;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>注意：native修饰符表示给组件的根元素注册事件️</p><h2 id="_6-修改密码功能实现" tabindex="-1">6.修改密码功能实现 <a class="header-anchor" href="#_6-修改密码功能实现" aria-label="Permalink to &quot;6.修改密码功能实现&quot;">​</a></h2><ul><li>整体流程</li></ul><p><img src="/hm-docs/assets/1677728155379-d9fad987-a1de-45fd-87f4-1676a3b57183.1a713f0f.png#averageHue=#fafafa&amp;clientId=udd47902c-ce16-4&amp;from=paste&amp;height=265&amp;id=u9a28f21a&amp;name=image.png&amp;originHeight=530&amp;originWidth=740&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=26640&amp;status=done&amp;style=none&amp;taskId=u9134c956-b0c8-420b-8941-648782bdcfc&amp;title=&amp;width=370" alt="image.png" data-fancybox="gallery"><img src="/hm-docs/assets/1677728164073-bf525af3-d30b-41e5-92d6-c20ab5283082.fdc9578d.png#averageHue=#fefefe&amp;clientId=udd47902c-ce16-4&amp;from=paste&amp;height=183&amp;id=ucc7d3d7a&amp;name=image.png&amp;originHeight=366&amp;originWidth=2618&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=55850&amp;status=done&amp;style=none&amp;taskId=ufeec6765-931f-409d-ad61-001f3d9a26d&amp;title=&amp;width=1309" alt="image.png" data-fancybox="gallery"></p><h3 id="_6-1-修改密码-弹出层" tabindex="-1">6.1-修改密码-弹出层 <a class="header-anchor" href="#_6-1-修改密码-弹出层" aria-label="Permalink to &quot;6.1-修改密码-弹出层&quot;">​</a></h3><p><img src="/hm-docs/assets/1677728198680-76a47239-be42-4b6b-9416-42d5773dcd3b.eb9e8e2f.png#averageHue=#b6d0e8&amp;clientId=udd47902c-ce16-4&amp;from=paste&amp;height=92&amp;id=u7bb79fbd&amp;name=image.png&amp;originHeight=184&amp;originWidth=818&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=14498&amp;status=done&amp;style=none&amp;taskId=u0e179948-71ca-43e8-a405-e900bcc79b7&amp;title=&amp;width=409" alt="image.png" data-fancybox="gallery"></p><ul><li>注册修改密码点击事件-代码位置(<strong>src/layout/components/NavBar.vue</strong>)</li></ul><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">&lt;!-- prevent阻止默认事件 --&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">a</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">target</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">_blank</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">@click.prevent</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">updatePassword</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">el-dropdown-item</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">修改密码</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">el-dropdown-item</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">a</span><span style="color:#89DDFF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><ul><li>声明变量和方法控制弹层显示-代码位置(<strong>src/layout/components/NavBar.vue</strong>)</li></ul><div class="language-vue line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">export default {</span></span>
<span class="line"><span style="color:#A6ACCD;">  data() {</span></span>
<span class="line"><span style="color:#A6ACCD;">    return  {</span></span>
<span class="line"><span style="color:#A6ACCD;">      showDialog: false</span></span>
<span class="line"><span style="color:#A6ACCD;">    }</span></span>
<span class="line"><span style="color:#A6ACCD;">  },</span></span>
<span class="line"><span style="color:#A6ACCD;">  methods: {</span></span>
<span class="line"><span style="color:#A6ACCD;">    updatePassword() {</span></span>
<span class="line"><span style="color:#A6ACCD;">      this.showDialog = true</span></span>
<span class="line"><span style="color:#A6ACCD;">    }</span></span>
<span class="line"><span style="color:#A6ACCD;">  }</span></span>
<span class="line"><span style="color:#A6ACCD;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><ul><li>放置弹层组件-代码位置(<strong>src/layout/components/NavBar.vue</strong>)</li></ul><div class="language-vue line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">el-dialog</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">width</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">500px</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">title</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">修改密码</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">:</span><span style="color:#C792EA;">visible</span><span style="color:#A6ACCD;">.</span><span style="color:#C792EA;">sync</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">showDialog</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">el-dialog</span><span style="color:#89DDFF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="_6-2-修改密码-表单结构" tabindex="-1">6.2-修改密码-表单结构 <a class="header-anchor" href="#_6-2-修改密码-表单结构" aria-label="Permalink to &quot;6.2-修改密码-表单结构&quot;">​</a></h3><p><img src="/hm-docs/assets/1677728768221-22858ce9-6391-4a32-b82a-3a4f541927db.83959241.png#averageHue=#fef9f9&amp;clientId=udd47902c-ce16-4&amp;from=paste&amp;height=416&amp;id=uea0289b2&amp;name=image.png&amp;originHeight=832&amp;originWidth=1226&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=49020&amp;status=done&amp;style=none&amp;taskId=u3b9177cb-68e1-4953-8fd8-7fd9b4337f0&amp;title=&amp;width=613" alt="image.png" data-fancybox="gallery"></p><ul><li>表单结构-代码位置(<strong>src/layout/components/NavBar.vue</strong>)</li></ul><div class="language-vue line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">el-form</span><span style="color:#A6ACCD;">  </span><span style="color:#C792EA;">label-width</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">120px</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        &lt;el-form-item label=&quot;旧密码&quot; &gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">          &lt;el-input  show-password size=&quot;small&quot; /&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        &lt;/el-form-item&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        &lt;el-form-item label=&quot;新密码&quot; &gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">          &lt;el-input  show-password size=&quot;small&quot; /&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        &lt;/el-form-item&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        &lt;el-form-item label=&quot;重复密码&quot; &gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">          &lt;el-input  show-password size=&quot;small&quot; /&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        &lt;/el-form-item&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        &lt;el-form-item&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">          &lt;el-button size=&quot;mini&quot; type=&quot;primary&quot; &gt;确认修改&lt;/el-button&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">          &lt;el-button size=&quot;mini&quot; &gt;取消&lt;/el-button&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        &lt;/el-form-item&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">el-form</span><span style="color:#89DDFF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><h3 id="_6-3-修改密码-表单校验" tabindex="-1">6.3-修改密码-表单校验 <a class="header-anchor" href="#_6-3-修改密码-表单校验" aria-label="Permalink to &quot;6.3-修改密码-表单校验&quot;">​</a></h3><p><img src="/hm-docs/assets/1677728899527-bfb2a62b-6943-46b1-b298-68bb79e32455.f7bbac26.png#averageHue=#fefefe&amp;clientId=udd47902c-ce16-4&amp;from=paste&amp;height=283&amp;id=u8f036856&amp;name=image.png&amp;originHeight=566&amp;originWidth=836&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=47652&amp;status=done&amp;style=none&amp;taskId=u2841f3f1-7bed-4985-8c0c-158f6b78ba5&amp;title=&amp;width=418" alt="image.png" data-fancybox="gallery"></p><ul><li>声明数据和规则-代码位置(<strong>src/layout/components/NavBar.vue</strong>)</li></ul><div class="language-vue line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">export default {</span></span>
<span class="line"><span style="color:#A6ACCD;">  data () {</span></span>
<span class="line"><span style="color:#A6ACCD;">    return  {</span></span>
<span class="line"><span style="color:#A6ACCD;">     passForm: {</span></span>
<span class="line"><span style="color:#A6ACCD;">        oldPassword: &#39;&#39;, // 旧密码</span></span>
<span class="line"><span style="color:#A6ACCD;">        newPassword: &#39;&#39;, // 新密码</span></span>
<span class="line"><span style="color:#A6ACCD;">        confirmPassword: &#39;&#39; // 确认密码字段</span></span>
<span class="line"><span style="color:#A6ACCD;">      },</span></span>
<span class="line"><span style="color:#A6ACCD;">     rules: {</span></span>
<span class="line"><span style="color:#A6ACCD;">        oldPassword: [{ required: true, message: &#39;旧密码不能为空&#39;, trigger: &#39;blur&#39; }], // 旧密码</span></span>
<span class="line"><span style="color:#A6ACCD;">        newPassword: [{ required: true, message: &#39;新密码不能为空&#39;, trigger: &#39;blur&#39; }, {</span></span>
<span class="line"><span style="color:#A6ACCD;">          trigger: &#39;blur&#39;,</span></span>
<span class="line"><span style="color:#A6ACCD;">          min: 6,</span></span>
<span class="line"><span style="color:#A6ACCD;">          max: 16,</span></span>
<span class="line"><span style="color:#A6ACCD;">          message: &#39;新密码的长度为6-16位之间&#39;</span></span>
<span class="line"><span style="color:#A6ACCD;">        }], // 新密码</span></span>
<span class="line"><span style="color:#A6ACCD;">        confirmPassword: [{ required: true, message: &#39;重复密码不能为空&#39;, trigger: &#39;blur&#39; }, {</span></span>
<span class="line"><span style="color:#A6ACCD;">          trigger: &#39;blur&#39;,</span></span>
<span class="line"><span style="color:#A6ACCD;">          validator: (rule, value, callback) =&gt; {</span></span>
<span class="line"><span style="color:#A6ACCD;">            // value</span></span>
<span class="line"><span style="color:#A6ACCD;">            if (this.passForm.newPassword === value) {</span></span>
<span class="line"><span style="color:#A6ACCD;">              callback()</span></span>
<span class="line"><span style="color:#A6ACCD;">            } else {</span></span>
<span class="line"><span style="color:#A6ACCD;">              callback(new Error(&#39;重复密码和新密码输入不一致&#39;))</span></span>
<span class="line"><span style="color:#A6ACCD;">            }</span></span>
<span class="line"><span style="color:#A6ACCD;">          }</span></span>
<span class="line"><span style="color:#A6ACCD;">        }] // 确认密码字段</span></span>
<span class="line"><span style="color:#A6ACCD;">      }</span></span>
<span class="line"><span style="color:#A6ACCD;">    }</span></span>
<span class="line"><span style="color:#A6ACCD;">  }</span></span>
<span class="line"><span style="color:#A6ACCD;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br></div></div><ul><li>绑定属性-代码位置(<strong>src/layout/components/NavBar.vue</strong>)</li></ul><div class="language-vue line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">el-form</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">ref</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">passForm</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">label-width</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">120px</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">:</span><span style="color:#C792EA;">model</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">passForm</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">:</span><span style="color:#C792EA;">rules</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">rules</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        &lt;el-form-item label=&quot;旧密码&quot; prop=&quot;oldPassword&quot;&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">          &lt;el-input v-model=&quot;passForm.oldPassword&quot; show-password size=&quot;small&quot; /&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        &lt;/el-form-item&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        &lt;el-form-item label=&quot;新密码&quot; prop=&quot;newPassword&quot;&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">          &lt;el-input v-model=&quot;passForm.newPassword&quot; show-password size=&quot;small&quot; /&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        &lt;/el-form-item&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        &lt;el-form-item label=&quot;重复密码&quot; prop=&quot;confirmPassword&quot;&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">          &lt;el-input v-model=&quot;passForm.confirmPassword&quot; show-password size=&quot;small&quot; /&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        &lt;/el-form-item&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        &lt;el-form-item&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">          &lt;el-button size=&quot;mini&quot; type=&quot;primary&quot; &gt;确认修改&lt;/el-button&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">          &lt;el-button size=&quot;mini&quot; &gt;取消&lt;/el-button&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        &lt;/el-form-item&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">el-form</span><span style="color:#89DDFF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><h3 id="_6-4-修改密码-确定和取消" tabindex="-1">6.4-修改密码-确定和取消 <a class="header-anchor" href="#_6-4-修改密码-确定和取消" aria-label="Permalink to &quot;6.4-修改密码-确定和取消&quot;">​</a></h3><ul><li>确定和取消流程</li></ul><p><img src="/hm-docs/assets/1677729151403-35755fd9-86d6-45f5-87d2-6191b963179d.e88c5d71.png#averageHue=#d4deee&amp;clientId=udd47902c-ce16-4&amp;from=paste&amp;height=177&amp;id=u0413e2a4&amp;name=image.png&amp;originHeight=354&amp;originWidth=2250&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=48366&amp;status=done&amp;style=none&amp;taskId=u6d0050dc-6804-4db2-a48d-f66eccc8b16&amp;title=&amp;width=1125" alt="image.png" data-fancybox="gallery"></p><ul><li>封装修改密码方法-代码位置(<strong>src/api/user.js</strong>)</li></ul><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;"> * 更新密码</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;"> * **/</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">updatePassword</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">data</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">request</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">    url</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/sys/user/updatePass</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;">    method</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">put</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">data</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><ul><li>确定方法-代码位置(<strong>src/layout/components/NavBar.vue</strong>)</li></ul><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 确定</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#82AAFF;">btnOK</span><span style="color:#A6ACCD;">() </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">      </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">$refs</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">passForm</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">validate</span><span style="color:#F07178;">(</span><span style="color:#C792EA;">async</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;font-style:italic;">isOK</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">isOK</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;">          </span><span style="color:#676E95;font-style:italic;">// 调用接口</span></span>
<span class="line"><span style="color:#F07178;">          </span><span style="color:#89DDFF;font-style:italic;">await</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">updatePassword</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">passForm</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#F07178;">          </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">$message</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">success</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">修改密码成功</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#F07178;">          </span><span style="color:#89DDFF;">this.</span><span style="color:#82AAFF;">btnCancel</span><span style="color:#F07178;">()</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#F07178;">      </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">},</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><ul><li>取消方法-代码位置(<strong>src/layout/components/NavBar.vue</strong>)</li></ul><div class="language-vue line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">btnCancel() {</span></span>
<span class="line"><span style="color:#A6ACCD;">      this.$refs.passForm.resetFields() // 重置表单</span></span>
<span class="line"><span style="color:#A6ACCD;">      // 关闭弹层</span></span>
<span class="line"><span style="color:#A6ACCD;">      this.showDialog = false</span></span>
<span class="line"><span style="color:#A6ACCD;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ul><li>监听弹层关闭事件</li></ul><div class="language-vue line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">el-dialog</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">@</span><span style="color:#C792EA;">close</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">btnCancel</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">width</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">500px</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">title</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">修改密码</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">:</span><span style="color:#C792EA;">visible</span><span style="color:#A6ACCD;">.</span><span style="color:#C792EA;">sync</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">showDialog</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><blockquote><p>有同学有疑惑，不是用了.sync修饰符吗？可以直接关闭弹层，为何还要监听close事件，这是因为sync修饰符只能关闭弹层，我们还需要将表单进行重置，因为你之前打开弹层可能修改了一半或者残留一些校验信息，再打开的时候这些信息应该都被重置，所以这里用监听事件的方式再重置一下表单，保证功能的体验和完整性。</p></blockquote><h2 id="_7-清理组件和路由" tabindex="-1">7. 清理组件和路由 <a class="header-anchor" href="#_7-清理组件和路由" aria-label="Permalink to &quot;7. 清理组件和路由&quot;">​</a></h2><blockquote><p>主页功能开发完了，我们要清理一下模板中残余文件</p></blockquote><p><img src="/hm-docs/assets/1677730984195-f36c0905-61fe-4a17-9a90-f50799da088e.80b38593.png#averageHue=#60902b&amp;clientId=udd47902c-ce16-4&amp;from=paste&amp;height=177&amp;id=u7bce8ca8&amp;name=image.png&amp;originHeight=354&amp;originWidth=1790&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=72400&amp;status=done&amp;style=none&amp;taskId=ub1f58f95-317c-46d6-819a-f957e13d8b7&amp;title=&amp;width=895" alt="image.png" data-fancybox="gallery"><img src="/hm-docs/assets/1677731001663-0c373e48-4eb6-4691-9f60-29048729645b.b5e0d8bd.png#averageHue=#b6b6b6&amp;clientId=udd47902c-ce16-4&amp;from=paste&amp;height=400&amp;id=u4e457222&amp;name=image.png&amp;originHeight=800&amp;originWidth=1908&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=166425&amp;status=done&amp;style=none&amp;taskId=u8610b8d9-8690-445e-abf9-dac59fc210c&amp;title=&amp;width=954" alt="image.png" data-fancybox="gallery"></p><ul><li>路由只保留登录-主页-404</li><li>请求模块只保留user.js模块</li></ul><h2 id="_8-创建项目所需要的组件和路由" tabindex="-1">8.创建项目所需要的组件和路由 <a class="header-anchor" href="#_8-创建项目所需要的组件和路由" aria-label="Permalink to &quot;8.创建项目所需要的组件和路由&quot;">​</a></h2><blockquote><p>人力资源项目需要这些模块</p></blockquote><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">├──</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">approval</span><span style="color:#A6ACCD;">            </span><span style="color:#676E95;font-style:italic;"># 审批管理</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#FFCB6B;">├──</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">attendance</span><span style="color:#A6ACCD;">          </span><span style="color:#676E95;font-style:italic;"># 考勤管理</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#FFCB6B;">├──</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">department</span><span style="color:#A6ACCD;">          </span><span style="color:#676E95;font-style:italic;"># 组织架构</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#FFCB6B;">├──</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">employee</span><span style="color:#A6ACCD;">            </span><span style="color:#676E95;font-style:italic;"># 员工管理</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#FFCB6B;">├──</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">permission</span><span style="color:#A6ACCD;">          </span><span style="color:#676E95;font-style:italic;"># 权限管理</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#FFCB6B;">├──</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">role</span><span style="color:#A6ACCD;">                </span><span style="color:#676E95;font-style:italic;"># 角色管理</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#FFCB6B;">├──</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">salary</span><span style="color:#A6ACCD;">              </span><span style="color:#676E95;font-style:italic;"># 工资管理</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#FFCB6B;">├──</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">social</span><span style="color:#A6ACCD;">              </span><span style="color:#676E95;font-style:italic;"># 社保管理</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><ul><li>创建模块</li></ul><p><img src="/hm-docs/assets/1677731135309-109ad7b4-2576-465a-b044-e538bbdb18e0.d8e271fe.png#averageHue=#cddfef&amp;clientId=udd47902c-ce16-4&amp;from=paste&amp;height=191&amp;id=ue8a889a5&amp;name=image.png&amp;originHeight=382&amp;originWidth=1740&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=42652&amp;status=done&amp;style=none&amp;taskId=ua807b721-bd50-4599-a2cf-48c051ca2d8&amp;title=&amp;width=870" alt="image.png" data-fancybox="gallery"></p><blockquote><p>大家可以直接从当天课程的素材中拷贝已经准备好的路由/组件</p></blockquote><p>组件结构样例 <img src="/hm-docs/assets/1677731384141-1b5beae2-c8f5-4edd-aaa2-98939d810a26.e35e38df.png#averageHue=#222120&amp;clientId=udd47902c-ce16-4&amp;from=paste&amp;height=226&amp;id=ufc6112db&amp;name=image.png&amp;originHeight=452&amp;originWidth=540&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=70289&amp;status=done&amp;style=none&amp;taskId=ucd35b6bf-5a4c-461b-840f-11e72e167c8&amp;title=&amp;width=270" alt="image.png" data-fancybox="gallery"> 路由模块样例 <img src="/hm-docs/assets/1677731402492-32431cd9-9ea9-4ef2-8f4e-068618df0d50.a58a3d54.png#averageHue=#21201f&amp;clientId=udd47902c-ce16-4&amp;from=paste&amp;height=260&amp;id=u7541e148&amp;name=image.png&amp;originHeight=520&amp;originWidth=772&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=84088&amp;status=done&amp;style=none&amp;taskId=u43d75f87-d4a4-4c19-aac8-f80c2a98111&amp;title=&amp;width=386" alt="image.png" data-fancybox="gallery"> 路由的统一导入 <img src="/hm-docs/assets/1677731417212-01c07f02-f5ab-4f95-927d-42a7b780e4fc.356c74ba.png#averageHue=#2b2624&amp;clientId=udd47902c-ce16-4&amp;from=paste&amp;height=154&amp;id=ua8283c83&amp;name=image.png&amp;originHeight=308&amp;originWidth=854&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=177144&amp;status=done&amp;style=none&amp;taskId=ub83ec474-dcc4-4199-9f27-ad45ece5e5a&amp;title=&amp;width=427" alt="image.png" data-fancybox="gallery"> 在src/router/index.js中集成到当前路由中 <img src="/hm-docs/assets/1677731443969-cdc6e4ab-d6df-4b47-8ad4-91cd288f5af6.79880cd7.png#averageHue=#271f1f&amp;clientId=udd47902c-ce16-4&amp;from=paste&amp;height=243&amp;id=ub0bdea79&amp;name=image.png&amp;originHeight=486&amp;originWidth=784&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=105815&amp;status=done&amp;style=none&amp;taskId=ue1b410a3-7458-4adf-9125-dc3d882f826&amp;title=&amp;width=392" alt="image.png" data-fancybox="gallery"></p><h1 id="_9-扩展-解析左侧菜单原理" tabindex="-1">9.扩展-解析左侧菜单原理 <a class="header-anchor" href="#_9-扩展-解析左侧菜单原理" aria-label="Permalink to &quot;9.扩展-解析左侧菜单原理&quot;">​</a></h1><p><img src="/hm-docs/assets/1677731478801-2152aa51-ceaf-4119-b12d-a9ff559c7064.74e61423.png#averageHue=#96bd4d&amp;clientId=udd47902c-ce16-4&amp;from=paste&amp;height=351&amp;id=uc38c0284&amp;name=image.png&amp;originHeight=702&amp;originWidth=1824&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=62927&amp;status=done&amp;style=none&amp;taskId=u4d3eba61-0397-4e5b-b4b0-9d78f889520&amp;title=&amp;width=912" alt="image.png" data-fancybox="gallery"></p><blockquote><p>左侧菜单的数据来源于路由模块的信息， 会根据路由信息的hidden属性来判断是否显示该路由信息到菜单， 菜单属性中的图表和标题来源于路由meta中的icon和title属性</p></blockquote><ul><li>分析过程</li></ul><p>sidebar组件引入路由信息 <img src="/hm-docs/assets/1677731592548-6450a3c2-c0f0-4ee3-a714-26717eef2c00.b7133edc.png#averageHue=#282827&amp;clientId=udd47902c-ce16-4&amp;from=paste&amp;height=253&amp;id=u247a4fd7&amp;name=image.png&amp;originHeight=506&amp;originWidth=1280&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=2595497&amp;status=done&amp;style=none&amp;taskId=u4ced5d02-67f0-4be4-a86c-88324c06edc&amp;title=&amp;width=640" alt="image.png" data-fancybox="gallery"> 循环渲染路由信息 <img src="/hm-docs/assets/1677731608249-6b3fe1a3-dd74-4825-91ae-ed0c3f39933c.22acc760.png#averageHue=#212121&amp;clientId=udd47902c-ce16-4&amp;from=paste&amp;height=192&amp;id=u4bead679&amp;name=image.png&amp;originHeight=384&amp;originWidth=1280&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=1969728&amp;status=done&amp;style=none&amp;taskId=u3ca43961-a16a-48e5-b824-9d7b8aa56b6&amp;title=&amp;width=640" alt="image.png" data-fancybox="gallery"> sidebarItem组件根据条件渲染-传递icon和title属性给item组件 <img src="/hm-docs/assets/1677731639959-05b555fb-24d3-4cd0-8afd-2afe3b4c2763.63c1b709.png#averageHue=#292928&amp;clientId=udd47902c-ce16-4&amp;from=paste&amp;height=122&amp;id=uacbf4751&amp;name=image.png&amp;originHeight=244&amp;originWidth=1280&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=1251622&amp;status=done&amp;style=none&amp;taskId=u1c0ba0bc-a751-454d-bd79-aaf923e704f&amp;title=&amp;width=640" alt="image.png" data-fancybox="gallery"> item组件接收icon和title属性，使用函数型组件完成渲染 <img src="/hm-docs/assets/1677731696023-0fab52a0-622f-487d-b7e9-8238d7b37150.2242569d.png#averageHue=#252524&amp;clientId=udd47902c-ce16-4&amp;from=paste&amp;height=360&amp;id=u9eef52e6&amp;name=image.png&amp;originHeight=720&amp;originWidth=990&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=2856615&amp;status=done&amp;style=none&amp;taskId=ua28d4a1e-3729-4dd0-b79a-a2a4fd00389&amp;title=&amp;width=495" alt="image.png" data-fancybox="gallery"></p><h1 id="_10-左侧菜单显示项目logo" tabindex="-1">10. 左侧菜单显示项目logo <a class="header-anchor" href="#_10-左侧菜单显示项目logo" aria-label="Permalink to &quot;10. 左侧菜单显示项目logo&quot;">​</a></h1><blockquote><p>logo有两种展示形态，当菜单展开时，显示大图，当菜单折叠时，显示小图</p></blockquote><p><img src="/hm-docs/assets/1677732418822-7afd682f-81c1-47be-8541-f3d4a24f8ad6.e4de06f1.png#averageHue=#fcfcfc&amp;clientId=udd47902c-ce16-4&amp;from=paste&amp;height=167&amp;id=u01d8597a&amp;name=image.png&amp;originHeight=334&amp;originWidth=1490&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=37451&amp;status=done&amp;style=none&amp;taskId=u38af763a-60c7-4c1d-8a32-a427944b5ee&amp;title=&amp;width=745" alt="image.png" data-fancybox="gallery"><img src="/hm-docs/assets/1677732426753-338d9b88-fc58-4dbc-9a1a-e34d17993a9b.919c6a32.png#averageHue=#c9dced&amp;clientId=udd47902c-ce16-4&amp;from=paste&amp;height=99&amp;id=u9ebbb763&amp;name=image.png&amp;originHeight=198&amp;originWidth=2024&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=26372&amp;status=done&amp;style=none&amp;taskId=uaa5eb1bf-9482-4bf0-946a-e10a6ee5f28&amp;title=&amp;width=1012" alt="image.png" data-fancybox="gallery"></p><ul><li>通过settings.js的设置，将logo显示出来-代码位置(<strong>src/settings.js</strong>)</li></ul><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">module.exports</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">人力资源后台管理系统</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#676E95;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">   * </span><span style="color:#89DDFF;font-style:italic;">@</span><span style="color:#C792EA;font-style:italic;">type</span><span style="color:#676E95;font-style:italic;"> </span><span style="color:#89DDFF;font-style:italic;">{</span><span style="color:#FFCB6B;font-style:italic;">boolean</span><span style="color:#89DDFF;font-style:italic;">}</span><span style="color:#676E95;font-style:italic;"> true | false</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">   * </span><span style="color:#89DDFF;font-style:italic;">@</span><span style="color:#C792EA;font-style:italic;">description</span><span style="color:#676E95;font-style:italic;"> Whether fix the header</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">   */</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">fixedHeader</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">,</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#676E95;font-style:italic;">/**</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">   * </span><span style="color:#89DDFF;font-style:italic;">@</span><span style="color:#C792EA;font-style:italic;">type</span><span style="color:#676E95;font-style:italic;"> </span><span style="color:#89DDFF;font-style:italic;">{</span><span style="color:#FFCB6B;font-style:italic;">boolean</span><span style="color:#89DDFF;font-style:italic;">}</span><span style="color:#676E95;font-style:italic;"> true | false</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">   * </span><span style="color:#89DDFF;font-style:italic;">@</span><span style="color:#C792EA;font-style:italic;">description</span><span style="color:#676E95;font-style:italic;"> Whether show the logo in sidebar</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">   */</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">sidebarLogo</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><ul><li>调整logo的页面结构-代码位置(<strong>src/layout/components/Sidebar/Logo.vue</strong>)</li></ul><div class="language-vue line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">sidebar-logo-container</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">:class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">{&#39;collapse&#39;:collapse}</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">transition</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">name</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">sidebarLogoFade</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">router-link</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">key</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">collapse</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">sidebar-logo-link</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">to</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">/</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">img</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">@/assets/common/logo.png</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">sidebar-logo</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">router-link</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">transition</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><ul><li>调整logo样式-代码位置(<strong>src/layout/components/Sidebar/Logo.vue</strong>)</li></ul><div class="language-vue line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">style</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">lang</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">scss</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">scoped</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">sidebarLogoFade-enter-active</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#B2CCD6;">transition</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#B2CCD6;">opacity</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1.5s</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">sidebarLogoFade-enter</span><span style="color:#A6ACCD;">,</span></span>
<span class="line"><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">sidebarLogoFade-leave-to</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#B2CCD6;">opacity</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">sidebar-logo-container</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#B2CCD6;">position</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> relative</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#B2CCD6;">width</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">100%</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#B2CCD6;">height</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">50px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#B2CCD6;">line-height</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">50px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#B2CCD6;">text-align</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> center</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#B2CCD6;">overflow</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> hidden</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#FFCB6B;">&amp;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">sidebar-logo-link</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#B2CCD6;">height</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">100%</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#B2CCD6;">width</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">100%</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#FFCB6B;">&amp;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">sidebar-logo</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">width</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">140px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">vertical-align</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> middle</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">margin-right</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">12px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#FFCB6B;">&amp;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">sidebar-title</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">display</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> inline-block</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">margin</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">#</span><span style="color:#A6ACCD;">fff</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">font-weight</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">600</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">line-height</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">50px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">font-size</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">14px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">font-family</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> Avenir, Helvetica Neue, Arial, Helvetica, sans-serif</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">vertical-align</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> middle</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#FFCB6B;">&amp;</span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">collapse</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">sidebar-logo</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">margin-right</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">width</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">32px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">height</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">32px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br></div></div></div></div></main><footer class="VPDocFooter" data-v-e9631fd0 data-v-face870a><!--[--><!--]--><div class="edit-info" data-v-face870a><!----><div class="last-updated" data-v-face870a><p class="VPLastUpdated" data-v-face870a data-v-149a99df>更新: <time datetime="2023-08-31T13:50:55.000Z" data-v-149a99df></time></p></div></div><div class="prev-next" data-v-face870a><div class="pager" data-v-face870a><a class="pager-link prev" href="/hm-docs/hr/Day02-%E7%99%BB%E5%BD%95%E6%A8%A1%E5%9D%97-%E4%B8%BB%E9%A1%B5%E9%89%B4%E6%9D%83.html" data-v-face870a><span class="desc" data-v-face870a>Previous page</span><span class="title" data-v-face870a>Day02</span></a></div><div class="has-prev pager" data-v-face870a><a class="pager-link next" href="/hm-docs/hr/Day04-%E7%BB%84%E7%BB%87%E6%9E%B6%E6%9E%84.html" data-v-face870a><span class="desc" data-v-face870a>Next page</span><span class="title" data-v-face870a>Day04</span></a></div></div></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-99cf8a88 data-v-f4388a15><div class="container" data-v-f4388a15><p class="message" data-v-f4388a15>Released under the MIT License.</p><p class="copyright" data-v-f4388a15>Copyright © 2022-present Shugang Zhou 传智教育</p></div></footer><!--[--><!--]--></div></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"index.md\":\"d89339df\",\"electron_eletron.md\":\"f78b205d\",\"hmzs_前台可视化_04-部署上线说明.md\":\"b689f494\",\"geek-park_03-布局容器.md\":\"f9a95023\",\"hmzs_前台可视化_03-接入微前端.md\":\"e4e73fe1\",\"geek-park_index.md\":\"274ee860\",\"hr_day01-项目介绍及初始化-登录页面.md\":\"a87e2d0f\",\"hmzs_前台可视化_01-项目环境搭建.md\":\"7fa65aa4\",\"hr_day02-登录模块-主页鉴权.md\":\"7c74ca95\",\"geek-park_02-登录页面.md\":\"6ab1a2cf\",\"memory.md\":\"22cd8c53\",\"mini-rabbit_01-项目.md\":\"3c3d7316\",\"geek-park_01-项目准备.md\":\"23a5f83b\",\"hr_day10-首页图表-nginx上线.md\":\"8a2d49ab\",\"other-resource_index.md\":\"e64d1d24\",\"mini-rabbit_04-分类.md\":\"26f22ed4\",\"interview_面经pc端02.md\":\"88e355b4\",\"hr_day05-组织架构-角色管理.md\":\"bef256c2\",\"hr_day08-cos上传和权限数据.md\":\"c03b8bcb\",\"hr_day03-主页模块-修改密码.md\":\"bc380dd0\",\"mini-rabbit_index.md\":\"9e57a010\",\"hr_day04-组织架构.md\":\"e838901c\",\"hmzs_前台可视化_02-大屏可视化.md\":\"98a26e50\",\"mini-rabbit_09-购物车.md\":\"0a823f26\",\"pinia_index.md\":\"e132c8fe\",\"ts_pro.md\":\"fe9a6545\",\"hr_day06-角色管理-员工管理.md\":\"beb02c6b\",\"mini-rabbit_03-推荐.md\":\"faed0355\",\"mini-rabbit_06-地址.md\":\"1fc49004\",\"interview_面经h5端02.md\":\"a7342342\",\"mini-rabbit_08-sku.md\":\"0775a2c7\",\"ts_backup.md\":\"55f33e6d\",\"hr_day07-员工管理-上传下载.md\":\"dea880ea\",\"vue2_base.md\":\"b804c94a\",\"project_super-doctor.md\":\"f0b1af73\",\"interview_面经h5端01.md\":\"e9040838\",\"geek-park_04-个人中心.md\":\"f16a09df\",\"ts_case.md\":\"7cd17957\",\"vue3_index.md\":\"5e17a031\",\"interview_面经pc端01.md\":\"d7141b56\",\"ts_index.md\":\"a01dfcff\",\"vue3_case.md\":\"d48addba\",\"project_login.md\":\"c54c8b93\",\"project_index.md\":\"6674c051\",\"mini-rabbit_02-首页.md\":\"299b4f8e\",\"project_end.md\":\"cb143198\",\"vue2_vuex.md\":\"a087fc79\",\"ts_advanced.md\":\"319200c0\",\"ts_core.md\":\"fb357910\",\"project_home.md\":\"86083086\",\"project_user.md\":\"c888dc36\",\"vue3_composition.md\":\"72ec4356\",\"mini-rabbit_07-详情.md\":\"1fe593a3\",\"mini-rabbit_10-订单.md\":\"732bea0a\",\"project_consult.md\":\"44bd936e\",\"project_room.md\":\"e43da8e9\",\"mini-rabbit_05-登录.md\":\"0cae2bde\",\"project_order.md\":\"8793ea0c\",\"project_consult-order.md\":\"8f1e59fa\",\"hr_day09-权限应用-首页.md\":\"4ca0b809\"}")
__VP_SITE_DATA__ = JSON.parse("{\"lang\":\"zh-CN\",\"dir\":\"ltr\",\"title\":\"优医问诊H5\",\"description\":\"最新Vue3技术栈,Vue3,TS,Pinia,Vant,在线问诊项目,H5\",\"base\":\"/hm-docs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo2.png\",\"search\":{\"provider\":\"local\"},\"nav\":[{\"text\":\"vue2\",\"link\":\"/vue2/base\"},{\"text\":\"vuex\",\"link\":\"/vue2/vuex\"},{\"text\":\"面经\",\"link\":\"/interview/面经H5端01\"},{\"text\":\"人资\",\"link\":\"/hr/Day01-项目介绍及初始化-登录页面\"},{\"text\":\"黑马智数\",\"link\":\"/hmzs/前台可视化/01-项目环境搭建\"},{\"text\":\"小兔鲜儿\",\"link\":\"/mini-rabbit/\"},{\"text\":\"TypeScript\",\"link\":\"/ts/\"},{\"text\":\"Vue3\",\"link\":\"/vue3/\"},{\"text\":\"Pinia\",\"link\":\"/pinia/\"},{\"text\":\"优医问诊\",\"link\":\"/project/\"},{\"text\":\"其它\",\"link\":\"/other-resource/\"}],\"sidebar\":{\"/vu2/\":[{\"text\":\"vue基础\",\"items\":[{\"text\":\"vue基础\",\"link\":\"/vu2/base\"}]}],\"/interview/\":[{\"text\":\"面经H5\",\"items\":[{\"text\":\"面经H5端-（上）\",\"link\":\"/interview/面经H5端01\"},{\"text\":\"面经H5端-（下）\",\"link\":\"/interview/面经H5端02\"},{\"text\":\"面经PC端-（上）\",\"link\":\"/interview/面经PC端01\"},{\"text\":\"面经PC端-（下）\",\"link\":\"/interview/面经PC端02\"}]}],\"/hr/\":[{\"text\":\"面经H5\",\"items\":[{\"text\":\"Day01\",\"link\":\"/hr/Day01-项目介绍及初始化-登录页面\"},{\"text\":\"Day02\",\"link\":\"/hr/Day02-登录模块-主页鉴权\"},{\"text\":\"Day03\",\"link\":\"/hr/Day03-主页模块-修改密码\"},{\"text\":\"Day04\",\"link\":\"/hr/Day04-组织架构\"},{\"text\":\"Day05\",\"link\":\"/hr/Day05-组织架构-角色管理\"},{\"text\":\"Day06\",\"link\":\"/hr/Day06-角色管理-员工管理\"},{\"text\":\"Day07\",\"link\":\"/hr/Day07-员工管理-上传下载\"},{\"text\":\"Day08\",\"link\":\"/hr/Day08-Cos上传和权限数据\"},{\"text\":\"Day09\",\"link\":\"/hr/Day09-权限应用-首页\"},{\"text\":\"Day10\",\"link\":\"/hr/Day10-首页图表-Nginx上线\"}]}],\"/hmzs/\":[{\"text\":\"黑马智数\",\"items\":[{\"text\":\"初始化项目\",\"link\":\"/hmzs/前台可视化/01-项目环境搭建\"},{\"text\":\"大屏可视化\",\"link\":\"/hmzs/前台可视化/02-大屏可视化\"},{\"text\":\"接入微前端\",\"link\":\"/hmzs/前台可视化/03-接入微前端\"},{\"text\":\"部署上线\",\"link\":\"/hmzs/前台可视化/04-部署上线说明\"}]}],\"/mini-rabbit/\":[{\"text\":\"小兔仙\",\"items\":[{\"link\":\"/mini-rabbit/01-项目\",\"text\":\"01-项目准备\"},{\"link\":\"/mini-rabbit/02-首页\",\"text\":\"02-首页模块\"},{\"link\":\"/mini-rabbit/03-推荐\",\"text\":\"03-推荐模块\"},{\"link\":\"/mini-rabbit/04-分类\",\"text\":\"04-分类模块\"},{\"link\":\"/mini-rabbit/05-登录\",\"text\":\"05-登录模块\"},{\"link\":\"/mini-rabbit/06-地址\",\"text\":\"06-地址模块\"},{\"link\":\"/mini-rabbit/07-详情\",\"text\":\"07-详情模块\"},{\"link\":\"/mini-rabbit/08-SKU\",\"text\":\"08-SKU模块\"},{\"link\":\"/mini-rabbit/09-购物车\",\"text\":\"09-购物车模块\"},{\"link\":\"/mini-rabbit/10-订单\",\"text\":\"10-订单模块\"}]}],\"/memory/\":[{\"text\":\"需要记忆的内容\",\"items\":[{\"link\":\"/memory/\",\"text\":\"需要记忆的内容\"}]}],\"/ts/\":[{\"text\":\"TypeScript\",\"items\":[{\"text\":\"TypeScript起步\",\"link\":\"/ts/\"},{\"text\":\"TypeScript核心\",\"link\":\"/ts/core\"},{\"text\":\"TypeScript进阶\",\"link\":\"/ts/advanced\"},{\"text\":\"TypeScript应用\",\"link\":\"/ts/pro\"},{\"text\":\"TS黑马头条案例\",\"link\":\"/ts/case\"}]}],\"/vue3/\":[{\"text\":\"Vue3核心\",\"items\":[{\"text\":\"快速开始\",\"link\":\"/vue3/\"},{\"text\":\"组合式API\",\"link\":\"/vue3/composition\"},{\"text\":\"综合案例\",\"link\":\"/vue3/case\"}]}],\"/pinia/\":[{\"text\":\"Pinia\",\"items\":[{\"text\":\"Pinia 核心\",\"link\":\"/pinia/\"}]}],\"/project/\":[{\"text\":\"优医问诊H5项目课程\",\"items\":[{\"text\":\"1. 项目起步\",\"link\":\"/project/\"},{\"text\":\"2. 登录模块\",\"link\":\"/project/login\"},{\"text\":\"3. 用户模块\",\"link\":\"/project/user\"},{\"text\":\"4. 首页模块\",\"link\":\"/project/home\"},{\"text\":\"5. 极速问诊\",\"link\":\"/project/consult\"},{\"text\":\"6. 医生问诊室\",\"link\":\"/project/room\"},{\"text\":\"7. 问诊订单模块\",\"link\":\"/project/consult-order\"},{\"text\":\"8. 药品订单模块\",\"link\":\"/project/order\"},{\"text\":\"9. 其他扩展\",\"link\":\"/project/end\"},{\"text\":\"辅助-超级医生\",\"link\":\"/project/super-doctor\"}]}]},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://gitee.com/luckybo0027\"}],\"footer\":{\"message\":\"Released under the MIT License.\",\"copyright\":\"Copyright © 2022-present Shugang Zhou 传智教育\"},\"lastUpdatedText\":\"更新\",\"outline\":\"deep\"},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":false}")</script>
    
  </body>
</html>